<template>
      <el-table
        ref="multipleTable"
        :data="arr"
        style="width: 100%"
        :header-cell-style="headClass"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="订单编号"
          width="150">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          prop="userwechat"
          label="用户微信"
          width="150">
        </el-table-column>
        <el-table-column
          prop="phoneNum"
          label="会员手机"
          width="150">
        </el-table-column>
        <el-table-column
          prop="courseName"
          label="课程名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="orderAmount"
          label="订单金额（元）"
           width="150">
        </el-table-column>
         <el-table-column
          label="订单状态"
           width="150">
          <template slot-scope="scope">{{ typeObj[scope.row.orderState] }}</template>

        </el-table-column>
         <el-table-column
          prop="date"
          label="提交时间"
           width="200">
           
        </el-table-column>
      
        <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary" 
          @click="openDialog(scope.row.id)">查看</el-button>
          <!-- handleEdit(scope.row) -->
           <!-- @click="dialogTableVisible = true" -->
      <el-button
          size="mini"
          type="info"
          @click="handleDelete(scope.row.id)">取消</el-button>
      </template>
    </el-table-column>
  </el-table>
  
</template>

<script>
import { deleteByid,batchDelete } from '../../../api/order';
import Bus from '../../../utils/Bus'

export default {
  props:['arr'],
data() {
      return {
        typeObj:{
          0:'待支付',
          1:'已关闭',
          2:'待确认',
          3:'已完成'
        },
        // tableData: [{
        //   id:'12345',
        //   userwechat: 'Cassy',
        //   phoneNum:'13888888888',
        //   courseName:'幼儿英语入门课程',
        //   orderAmount:'2399.00',
        //   orderState:0, //0 待支付  1 已关闭 2 待确认 3 已完成
        //   date: '2016-05-03',
        // },
       
        multipleSelection: []
      }
    },
    mounted(){
      Bus.$on('batchDelete',this.batchDeleteTable)
    },
    beforeDestroy(){
      Bus.$off('batchDelete',this.batchDeleteTable)
    },
    methods: {
      headClass(){
      return 'background-color:#eef1f6;font-weight:bold;color:black;font-size:16px'
    },
      openDialog(val){
          this.$emit('openDialog',val)
      },
      handleSelectionChange(val) {
      console.log(val);
        this.multipleSelection = val;
      },
       handleEdit(row) {
        console.log(row);
      },
      handleDelete(id) {
        console.log(id);
        deleteByid({id:id}).then(res=>{
          console.log(res);
          if(res.code==200){
            this.$emit('resetparentFun')
          }
        })
      },
      batchDeleteTable(){//批量删除
         console.log('调用批量删除');
         let ids = ''
         if(this.multipleSelection.length > 0){
            this.multipleSelection.forEach(item=>{
              ids += item.id +','
            })
            ids = ids.slice(0,ids.length-1)
         }
         console.log(ids);
         batchDelete({ids:ids}).then(res=>{//批量数据传递
           console.log(res);
            if(res.code==200){
            this.$emit('resetparentFun')
          }
         })
      }
    }
  }

</script>

<style lang="less">
.cell{
  text-align: center;
  .el-button{
    width: 56px;
    height: 28px;
    padding: 0 20px;
    text-align: center;
  }
}

</style>